/**
 * @param {string | number} width 弹窗默认520px (string | number)
 * @param {string} title 设置标题栏文字
 * @param {boolean} visible 默认false,不显示Modal
 * @param {string} cancelText 设置取消按钮文字
 * @param {function} onCancel 点击取消按钮事件
 * @param {string} okText 设置确定按钮文字
 * @param {function} onOk 点击确定按钮事件
 * @param {function} footer 设置{null},隐藏页脚
 * @returns
 */

import Config from './config'

const Modal = (argv: any) => {
    const Footer = () => {
        const btns = [
            { name: 'onCancel', text: argv.cancelText || '取 消', type: argv.cancelType || 'default' },
            { name: 'onOk', text: argv.okText || '确 定', type: argv.okType || 'primary' }
        ]
        if (argv.footer !== null) {
            const Buttons = btns.map((item: any) => {
                let fn = argv[item.name]
                if (fn) {
                    return (
                        <button type='button' className={`ant-btn ant-btn-${item.type}`} onClick={fn}>
                            <span>{item.text}</span>
                        </button>
                    )
                }
            })
            return <div className='ant-modal-footer'>{Buttons}</div>
        } else return null
    }

    const Dialog = (
        <div className='ant-modal-root'>
            <div className='ant-modal-mask'></div>
            <div tabIndex={-1} className='ant-modal-wrap' role='dialog'>
                <div role='document' className='ant-modal ' style={{ width: argv.width, transformOrigin: '448.4px 259.4px' }}>
                    <div tabIndex={0} aria-hidden='true' style={{ width: '0px', height: '0px', overflow: 'hidden', outline: 'none' }}></div>
                    <div className='ant-modal-content'>
                        <button type='button' aria-label='Close' className='ant-modal-close' onClick={argv.onCancel}>
                            <span className='ant-modal-close-x'></span>
                        </button>
                        <div className='ant-modal-header' style={{ minHeight: '56px' }}>
                            <div className='ant-modal-title'>{argv.title}</div>
                        </div>
                        <div className='ant-modal-body'>{argv.children}</div>
                        <Footer />
                    </div>
                    <div tabIndex={0} aria-hidden='true' style={{ width: '0px', height: '0px', overflow: 'hidden', outline: 'none' }}></div>
                </div>
            </div>
        </div>
    )

    if (argv.visible) return Dialog
    else return null
}

Modal.open = (argv: any) => {
    Config({ type: 'modal', ...argv })
}

Modal.confirm = (argv: any) => {
    Config({ type: 'confirm', ...argv, icon: 'anticon-question-circle-o' })
}

Modal.info = (argv: any) => {
    Config({ type: 'info', ...argv, icon: 'anticon-info-circle-o' })
}

Modal.success = (argv: any) => {
    Config({ type: 'success', ...argv, icon: 'anticon-check-circle-o' })
}

Modal.error = (argv: any) => {
    Config({ type: 'error', ...argv, icon: 'anticon-cross-circle-o' })
}

Modal.warning = (argv: any) => {
    Config({ type: 'warning', ...argv, icon: 'anticon-exclamation-circle-o' })
}

Modal.defaultProps = {
    width: 520,
    visible: false,
    okText: '确 定',
    cancelText: '取 消'
}

export default Modal
